import React, { Component } from "react";
import store from "../../redux/store";
import { createIncrementAction, createIncrementAsyncAction } from "../../redux/count_action";
export default class Count extends Component {
  componentDidMount() {
    this.unsubscribe = store.subscribe(this.handleChange);
  }
  componentWillUnmount() {
    this.unsubscribe();
  }
  handleChange = () => {
    this.setState({});
  };
  handleIncrement = () => {
    const {
      selectValue: { value },
    } = this;
    store.dispatch(createIncrementAction(value));
  };
  incrementAsync = () => {
    const {
      selectValue: { value },
    } = this;
    store.dispatch(createIncrementAsyncAction(value));
  };
  render() {
    return (
      <div>
        <h2>当前的和为{store.getState()}</h2>
        <div>
          <select ref={(c) => (this.selectValue = c)} onChange={this.handleChange}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <button onClick={this.handleIncrement}>+</button>
          <button onClick={this.decrement}>-</button>
          <button onClick={this.incrementIfOdd}>选择为奇数时加</button>
          <button onClick={this.incrementAsync}>异步加</button>
        </div>
      </div>
    );
  }
}
